.custom-scrollbar {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;

  &:hover {
    .custom-scrollbar__bar {
      opacity: 1;
    }
  }

  .custom-scrollbar__wrapper {
    overflow: auto;
    margin-right: -20px;
    margin-bottom: -20px;
    box-sizing: border-box;
    padding: 0 20px 20px 0;
  }

  .custom-scrollbar__view {
    width: min-content;
  }

  .custom-scrollbar__bar {
    position: absolute;
    background-color: rgba(238, 238, 238, 0.1);
    border-radius: 4px 4px 4px 4px;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    opacity: 0;
    cursor: pointer;
    &.is-always {
      opacity: 1;
    }
    &.is-horizontal {
      height: 6px;
      left: 50%;
      transform: translateX(-50%) scaleX(.98);
      bottom: 2px;
    }
    &.is-vertical {
      width: 6px;
      right: 2px;
      transform: translateY(-50%) scaleY(.98);
      top: 50%;
    }
  }

  .custom-scrollbar__thumb {
    position: absolute;
    background-color: #909399;
    opacity: .3;
    border-radius: 4px 4px 4px 4px;
    &:hover {
      opacity: .5;
    }
    &.is-horizontal {
      height: 6px;
    }
    &.is-vertical {
      width: 6px;
    }
  }
}
